<template>
  <div>
    <div v-for="item in chaterInfoList"  class="list">
      <div class="badge">
        <van-badge :content="user.getNum(item.id) > 0 ? user.getNum(item.id) : ''" :max="99" />
      </div>
      <message :user="item"  @click="toChat(item.id)">
      </message>
    </div>
  </div>
</template>
<script setup lang='ts'>
import message from '@/components/message.vue';
import { userStore } from '@/store';
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';
const user = userStore()
const { chaterInfoList } = storeToRefs(user);
const router = useRouter()
const toChat = (id: string) => {
  user.resetNum(id)
  router.push({
    path: '/ChatInterface',
    query: {
      id: id
    }
  })
}
</script>

<style lang='less' scoped>
.list {
  position: relative;
}

.badge {
  position: absolute;
  top: 2.5rem;
  right: 1.5rem;
}
</style>
